<template>
  <div class="setting-container">
    <el-card>
      <!-- 导航 -->
      <div slot="header">
        <el-breadcrumb>
          <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
          <el-breadcrumb-item>个人设置</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <!-- 栅格 -->
      <el-row>
        <el-col :span="12">
          <!-- 表单 -->
          <el-form :model="user" :rules="r" label-width="120px">
            <el-form-item label="编号：">{{ user.id }}</el-form-item>
            <el-form-item label="手机：">{{ user.mobile }}</el-form-item>
            <el-form-item label="用户名称：" prop="name">
              <el-input v-model="user.name"></el-input>
            </el-form-item>
            <el-form-item label="用户简介：">
              <el-input
                type="textarea"
                :rows="3"
                v-model="user.intro"
              ></el-input>
            </el-form-item>
            <el-form-item label="联系邮箱：" prop="email">
              <el-input v-model="user.email"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="saveFn"  type="primary">保存设置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12">
          <!-- 上传组件 action必须属性-->
          <el-upload
            class="avatar-uploader"
            action=""
            :http-request="customUploadFn"
            :show-file-list="false"
          >
            <img v-if="user.photo" :src="user.photo" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <p class="edit-photo">修改头像</p>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { userInfoAPI, updateInfoAPI, upAvatarAPI } from '@/api'
import { updateUserRules } from '@/verify'
import EventBus from '@/EventBus'
export default {
  name: 'settings',
  data () {
    return {
      user: {}, // null.id 就直接报错, {}.id 返回的是undefined
      r: updateUserRules // 验证规则
    }
  },
  // created方法在组件创建就执行(data和methods初始化完毕, 触发created函数, 标签编译准备挂载)
  async created () { // 异步函数-不会阻拦页面的呈现
    const [err, res] = await userInfoAPI() // await会阻塞代码 - 发起了一个网络请求 (虽然await等待, 但是主线程继续解析标签)
    if (err) return
    this.user = res.data.data
  },
  // async+await结论: 这块异步代码"里"是同步流程(阻塞) - async之外的地方还是照常执行
  // await会把后面的异步任务-变成同步流程的代码
  methods: {
    async saveFn () {
      const [err] = await updateInfoAPI(this.user)
      if (err) return
      this.$eventBus.$emit('namechange', this.user.name)
      // this(Vue组件对象) - 原型链就有Vue.prototype身上的东西
      // 对象的.__proto__ 指向 构造函数的prototype
    },
    async customUploadFn (fileObj) { // el-upload自定义上传过程(不使用内置的-默认只能以post请求发送图片)
      // 但是: 更新头像的接口要求我们必须使用PATCH的请求方式, 所以自定义覆盖默认的

      // 如何把文件传给后台
      // (1): 文件装在FormData类型对象容器里 (html5新出的-ajax传递文件成为可能)
      // (2): 请求体(body/data)里-装的FormData数据对象 (请求头必须设置Content-Type: multipart/form-data;分割符) - 浏览器发现你的内容是FormData会自动给你加入(观察network请求的请求头字段)
      const fd = new FormData()
      fd.append('photo', fileObj.file) // .file拿到了用户选择的文件对象
      const [err, res] = await upAvatarAPI(fd)
      if (err) return
      this.user.photo = res.data.data.photo // 把上传成功的头像地址赋予到变量-更新当前页面
      EventBus.$emit('photourl', this.user.photo) // 触发事件总线里的photourl事件把值带过去
      // 注意:
      // 1. 浏览器发现请求体-formData 会"自动带"请求头Content-Type: multipart/form-data; 分隔符
      // 请求体里的参数格式, 直接就是FormData对象

      // 2. axios / jQuery / 其他第三方网络请求插件, 插件自己有套规则
      // 可能根据请求体如果是对象(JSON字符串- 在请求头"写" Content-Type: application/json)
      // 请求体里的参数格式 '{"key":"value", "key":"value"}'

      // 3. 原生Ajax, 浏览器"默认携带"请求头是 Content-Type: application/x-www-form-urlencoded
      // 请求体里的参数都是key=value&key=value&key=value的这种格式

      // 组件通信的关系(总结)
      // 使用(引入import)组件- 父子关系
      // 父 -> 子 发数据 自定义属性 props
      // 父 <- 子 发数据 自定义事件

      // 父 -> 重孙子  A引用B, B引用C, C引用D  (A想向D里传值) - 跨组件
      // 兄弟(谁也没有引入谁) / 一点关系都没有的2个vue组件
      // 2种传值方案:
      // (1): eventBus - 事件总线
      // (2): vuex - vue扩展的插件(全局状态管理)-全局变量(值变化-使用的地方就会更新)
    }
  }
}
</script>

<style scoped lang='less'>
.avatar {
  width: 178px;
  height: 178px;
  line-height: 178px;
}
.avatar-uploader {
  text-align: center;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar-uploader /deep/ .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.edit-photo {
  font-size: 12px;
  text-align: center;
}
</style>
